<template>
    <div class="accessoryData">
        <div >
            <el-radio-group v-model="state.fileData.isCollapse">
                <el-radio-button :label="true" >收起文件夹</el-radio-button>
                <el-radio-button :label="false" >显示文件夹</el-radio-button>
            </el-radio-group>
            <el-input v-model="state.accessoryKey" style="width:200px;vertical-align: bottom;margin-left:10px;" clearable placeholder="搜索附件名字" class="input-with-select" @keyup.enter.native="state.accessoryKey?getAccessoryList():''" @clear="getAccessoryList()">
                <template #append>
                <el-button  @click="state.accessoryKey?getAccessoryList():''">
                        <i class="fa fa-search"></i>
                </el-button>
                </template>
            </el-input>
            <el-button style="vertical-align: bottom;margin-left:10px;" type="primary" @click="uploadBtn('open')"><i class="fa fa-cloud-upload"></i>上传</el-button>
            <div class="floatRight">
                <el-button type="primary" :disabled="state.checkList.length>0?false:true" @click="queding">确认</el-button>
            </div>
        </div>
        <div class="attachmentData">
            <div>
                <div class="attachmentData-table">
                    <div class="attachmentData-table-left" :class="state.fileData.isCollapse?'close':'open'">
                        <div class="attachmentData-table-left-item">
                            <el-input v-model="state.fileKey" clearable placeholder="搜索文件夹名字" class="input-with-select" @keyup.enter.native="state.fileKey?getfileList():''" @clear="getfileList">
                                <template #append>
                                <el-button  @click="state.fileKey?getfileList():''">
                                        <i class="fa fa-search"></i>
                                </el-button>
                                </template>
                            </el-input>
                        </div>
                        <div class="attachmentData-table-left-item k-line-1" v-for="item,index in state.fileData.list" :key="index" @click="fileBtn(item)">
                            <div :class="state.accessoryData.fileId==item.id?'active':''">
                               <i class="fa fa-folder"></i> {{item.fileName}}<span v-if="item.total">（{{item.total}}）</span>
                            </div>
                        </div>
                        <div class="attachmentData-table-left-item k-text-center"  style="margin-top: 10px;">
                                <el-pagination
                                    :hide-on-single-page="state.fileData.pages.pageCount>1?false:true"
                                    v-model:current-page="state.fileData.pages.pno"
                                    v-model:page-size="state.fileData.pages.pageSize"
                                    :total="state.fileData.pages.recordCount"
                                    small
                                    background
                                    layout="prev, pager, next"
                                    @current-change="fileChange"
                                />
                        </div>
                    </div>
                    <div class="attachmentData-table-right" :style="'width:'+(state.fileData.isCollapse?'calc(100% - 0px)':'calc(100% - 186px)')+';'"  v-loading="state.tbloading">
                        <div class="attachmentData-table-right-item" v-for="item,index in state.accessoryData.list" :key="item.id" @click="checkBtn(item)">
                            <!-- 图片 -->
                            <div class="itemimg">
                                <el-image style="width: 200px; height: 200px" :src="item.imgurl"  fit="cover" />
                                <div class="fname k-line-1 textCenter">{{item.fname}}</div>
                            </div>
                            <div class="xuanze k-row-center k-col-center" :style="isSelect(item)?'top:0':''">
                                <i class="fa fa-check" :style="isSelect(item)?'color:#409eff;':''"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--上传弹窗-->
		<el-dialog v-model="state.uploadBtnShow" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" draggable title="上传文件">
			<div>
				<el-upload
					class="upload-demo"
					drag
					:action="state.pageInfo.domain"
					multiple
					:headers="state.uploadData.headers"
					:data="state.uploadData.data"
					:accept="state.uploadData.selectType"
					:on-success="uploadSuccess"
					list-type="picture-card"
					v-model:file-list="state.uploadData.fileList"
					:on-preview="uploadPreview"
				>
					<i class="fa fa-cloud-upload"></i>
					<div class="el-upload__text">
					拖拽文件上传 或者<em>点击上传</em>
					</div>
					<template #tip>
					<div class="el-upload__tip">
						{{state.pageInfo.msg}}
					</div>
					</template>
				</el-upload>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="uploadBtn('close')" v-if="state.uploadData.fileList.length<=0">取消</el-button>
					<el-button type="primary" @click="uploadBtn('close')" v-if="state.uploadData.fileList.length>0">确定</el-button>
				</span>
			</template>
		</el-dialog>
    </div>
</template>
    
<script setup lang="ts" name="accessory">
    import { toRefs,ref,watch, reactive,onMounted, defineComponent,defineAsyncComponent,onBeforeUnmount } from 'vue';
    import { useRouter } from 'vue-router'
    import { pageInfo } from '/@/api';
    import { attachmentApi } from '/@/api/attachment';
    import { Session } from '/@/utils/storage';
    import { ElNotification, ElMessage ,ElMessageBox} from 'element-plus'
        
    
    // 定义父组件传过来的值
    const props = defineProps({
        // 附件类型
        type:{
            type:String,
            default: () => '1',
        }
    });
    
    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['select']);
    
    const state = reactive({
        type: props.type,
        dataList:[],
        tbloading:true,
        pages: {
            isAll: false,
            pageCount: 0,
            pageSize: 0,
            recordCount: 0,
            pno: 1
        },
        pageInfo:{
            typeList:[],
            type:'',
            domain:"",
            msg:"jpg/png files with a size less than 500kb"
        },
        fileKey:"",
        fileData:{
            list:[],
            pages:{
                isAll: false,
                pageCount: 0,
                pageSize: 20,
                recordCount: 0,
                pno: 1
            },
            isCollapse:false,
        },
        accessoryKey:"",
        accessoryData:{
            list:[],
            pages:{
                isAll: false,
                pageCount: 0,
                pageSize: 0,
                recordCount: 0,
                pno: 1
            },
            fileId:"",
            orderBy:"",
            isuptp:"",
            istype:"",
            selectList:[],
        },
        uploadBtnShow:false,
        uploadData:{
            headers:{
                Authorization:Session.get('token'),
                "Form-type":"admin",
            },
            data:{
                fid:'',//文件夹ID
                wapp:0,//是否为前端
                uid:0,//用户ID
                type:0,//上传类型
            },
            selectType:"",
            isUpload:false,
            fileList:[]
        },
        checkList:[],
    });
    const fileChange = (val: number) => {
        getfileList(val);
    }
    // 上传弹窗
    function uploadBtn(e){
        if(e=='open'){
            state.uploadData.data.fid=state.accessoryData.fileId;
            state.uploadData.data.type=state.type;
            state.uploadBtnShow=true;
        }
        if(e=='close'){
            if(state.uploadData.fileList.length>0){
                getAccessoryList();
                state.uploadData.isUpload=false;
                state.uploadData.fileList=[];
            }
            state.uploadBtnShow=false;
        }
    }
    // 上传成功
    function uploadSuccess(response, uploadFile, uploadFiles){
        if(response.code==200){
            state.uploadData.isUpload=true;
            if(state.type=='1'){

            }else{
                ElNotification({
                    message: "上传成功",
                    type: 'success',
                });
                uploadBtn('close');
            }
        }else{
            ElNotification({
                title: 'Error',
                message: response.msg,
                type: 'error',
            });
            for(let i in state.uploadData.fileList){
                if(state.uploadData.fileList[i].uid==uploadFile.uid){
                    state.uploadData.fileList.splice(i, 1);
                }
            }
        }
    }
    // 上传成功预览
    function uploadPreview(uploadFile){
        imageUrl.value = uploadFile.url!
        imageShow.value = true
    }
    const fileSelect = (key: string, keyPath: string[]) => {
        state.accessoryData.fileId=key;
        getAccessoryList();
    }
    const isSelect = (item) => {
        for(let p of state.checkList){
            if(p.id==item.id){
                return true;
            }
        }
        return false;
    }
    const checkBtn = (item) => {
        if(isSelect(item)){
            let list=[];
            for(let p of state.checkList){
                if(p.id!=item.id){
                    list.push(p)
                }
            }
            state.checkList=list;
        }else{
            state.checkList.push(item);
        }
    }
    const queding = () => {
        emit('select',state.checkList);
        hide();
    }
    const hide = () => {
        state.checkList=[];
    }
    const fileBtn = (item) => {
	//  console.log(item)
        if(item.id!=state.accessoryData.fileId){
            state.accessoryData.fileId=item.id;
            getAccessoryList();
        }
    }
    // 获取页面前置
    function getpageInfo(){
        pageInfo('attachment').then(res=>{
            //  console.log(res)
            state.pageInfo.typeList=res.typeList;
            state.pageInfo.type=res.type;
            state.pageInfo.domain=res.domain;
            state.pageInfo.msg=res.msg;
            for(let p of res.typeList){
                if(p.key==state.type){
                    state.uploadData.selectType=p.selectType;
                }
            }
            getfileList();
            getAccessoryList();
        })
    }
    // 获取文件夹信息
    function getfileList(pno){
        if(!pno){
            pno=1;
        }
        let dt={
            pages:{
                pno:pno,
                pageSize:state.fileData.pages.pageSize
            },
            type:state.type,
            key:state.fileKey,
        }
        attachmentApi("fileList",dt).then(res=>{
            //  console.log(res)
            state.fileData.list=res.list;
            state.fileData.pages=res.pages;
            state.type=res.type;
        })
    }
    // 获取附件信息
    function getAccessoryList(pno){
        state.tbloading=true;
        if(!pno){
            pno=1;
        }
        let dt={
            pages:{
                pno:pno,
                pageSize:state.fileData.pages.pageSize
            },
            type:state.type,
            key:state.accessoryKey,
            fileId:state.accessoryData.fileId,
        }
        //  console.log(dt);
        attachmentApi("accessoryList",dt).then(res=>{
            //  console.log(res)
            state.accessoryData.list=res.list;
            state.accessoryData.pages=res.pages;
            state.tbloading=false;
            // state.pageInfo.type=res.type;
            // getAccessoryList();
        })
    }
    // 页面销毁时
    onBeforeUnmount(() => {
        
    });
    onMounted(()=>{
        console.log('开始')
        getpageInfo();
    })
    // 监听是否禁用改变
    // https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
    watch(
        () => props.type,
        (bool) => {
            console.log(state.type)
        },
        {
            deep: true,
        }
    );
</script>
<style  scoped lang="scss">
    .accessoryData{
        .attachmentData{
            &-harder{
                display:flex;
            }
            &-table{
                display:flex;
                margin-top:15px;
                .close{
                    width: 0px !important;
                    margin: 0 !important;
                    border: 0 !important;
                }
                &-left{
                    transition:  all .2s ease-in-out;
                    -webkit-transition:  all .2s ease-in-out;
                    -moz-transition:  all .2s ease-in-out;
                    -o-transition:  all .2s ease-in-out;
                    width: 180px;
                    border-right:1px solid #ccc;
                    margin-right:5px;
                    padding-right:5px; 
                    &-item{
                        line-height: 50px;
                        width: 100%;
                        cursor: pointer;
                        overflow: hidden;
                        position: relative;
                        .fileBtnCss{
                            display: none;
                            position: absolute;
                            right: 0;
                            top: 0;
                        }
                    }
                    &-item:hover .fileBtnCss{
                        display: block;
                    }
                    .active{
                        color: var(--el-menu-active-color);
                    }
                }
                &-right{
                    .headerSearch{
                        display: inline-block;
                        margin-left:10px;
                    }
                    &-item{
                        display: inline-block;
                        margin-right: 10px;
                        margin-bottom: 10px;
                        border:1px solid #f3f4f6;
                        position: relative;
                        overflow: hidden;
                        .xuanze{
                            transition:  all .2s ease-in-out;
                            -webkit-transition:  all .2s ease-in-out;
                            -moz-transition:  all .2s ease-in-out;
                            -o-transition:  all .2s ease-in-out;
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top: -500px;
                            left:0;
                            background:rgba(0,0,0,0.5);
                            display: flex;
                            font-size:50px;
                            color:#fff;
                            cursor: pointer;
                        }
                    }
                    &-item:hover .fname{
                        bottom: -100px;
                    }
                    &-item:hover .xuanze{
                        top: 0px;
                    }
                    &-center{
                        width: 100%;
                    }
                }
            }
        }
        .itemimg{
            position: relative;
            .fname{
                position: absolute;
                width: 100%;
                line-height:30px;
                background:rgba(0,0,0,0.5);
                color:#fff;
                bottom: 0;
                left:0;
                transition:  all .2s ease-in-out;
                -webkit-transition:  all .2s ease-in-out;
                -moz-transition:  all .2s ease-in-out;
                -o-transition:  all .2s ease-in-out;
            }
        }
    }
</style>
    